<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
    <title>基本信息采集</title>
    <link rel="stylesheet" href="{% static 'css/ydui.css' %}" charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"
            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
    {#    <script src="{% static 'js/ydui.flexible.js' %}" charset="UTF-8"></script>#}

    <style>
        body {
            background-color: #f7f7f7;
        }

        .footer {
            position: fixed;
            bottom: 0;
            display: flex;
            flex-direction: column;
            width: 100%;
        {#vertical-align: center;#}

        }

        .footer-p {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            color: #5a6268;
            justify-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">青岛大学 每日疫情上报</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">表单 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="../anysis/">统计 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../index/">退出</a>
                </li>
            </ul>
        </div>
    </nav>
    <form method="post" action="../complete/" id="form">
        {% csrf_token %}
        <div class="form-group">
            <label for="phonenumber">您的联系电话（手机）</label>
            <input type="tel" class="form-control" name="phonenumber" id="phonenumber" required>
        </div>
        <div class="form-group">
            <label for="location">家庭所在地</label>
            <input type="text" class="form-control" name="residence" id="J_Address" value=""  required>
        </div>


        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>
<footer class="footer">
        <div class="footer-p">
            <p>青岛大学 版权所有 ©2020</p>
            <p>电子邮件：<a href="mailto:ecampus@qdu.edu.cn">ecampus@qdu.edu.cn</a></p>
            <p>青岛大学 智慧校园服务创新协会 提供技术支持</p>

        </div>
    </footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<script src="{% static 'js/ydui.citys.js' %}"></script>
<script src="{% static 'js/ydui.js' %}"></script>
<script>
    !function () {
        var $target = $('#J_Address');

        $target.citySelect();

        $target.on('click', function (event) {
            event.stopPropagation();
            $target.citySelect('open');
        });

        $target.on('done.ydui.cityselect', function (ret) {
            console.log(ret)
            $(this).val(ret.country + ' ' + ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    }();
</script>
<script>
    $('#form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                phonenumber: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        regexp: {
                            regexp: /^1\d{10}$/,
                            message: '手机号格式错误'
                        }
                    }
                }
            }
        });

        var bootstrapValidator = $('form').data('bootstrapValidator');
</script>
</body>
</html>